import { Form, Input, Button, Checkbox, Alert } from "antd";
import { useHistory } from "react-router-dom";
import styles from "./RegisterForm.module.css";
import axios from "axios";

interface ResultType {
  data: {
    data: {
      avatar: null;
      createTime: number;
      id: number;
      phone: null;
      sign: null;
      token: string;
      updateTime: null;
      username: string;
    };
  };
}

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

export const RegisterForm = () => {
  const history = useHistory();

  const onFinish = async (values: any) => {
    try {
      const res: ResultType = await axios.post("/api/user/register", {
        username: values.username,
        password: values.password,
      });
      if (res) {
        localStorage.setItem("token", res.data.data.token);
        localStorage.setItem("username", res.data.data.username);
        history.push("/signIn");
      }
    } catch (error) {
      <Alert message="注册失败" type="error" />;
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      className={styles["register-form"]}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        label="Confirm Password"
        name="confirm"
        hasFeedback
        rules={[
          { required: true, message: "Please input your confirm password!" },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue("password") === value) {
                return Promise.resolve();
              }
              return Promise.reject("密码确认不一致！");
            },
          }),
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
